<template>
	<statusBarVue title="注册" :isShowBar="true" :isShowLeft="true" :isMyBgi="true" />
	<view class="register-page" :style="pageHaveBarStyle">
		<view class="register-page-group">
			<uni-forms ref="form" :rules="rules" :model="formData" label-position="top" label-width="120px">
				<uni-forms-item label="昵称" name="nick" required>
					<uni-easyinput v-model="formData.nick" placeholder="请输入" primaryColor="#22A366" />
				</uni-forms-item>
				<uni-forms-item label="手机号" name="phone" required>
					<uni-easyinput v-model="formData.phone" placeholder="请输入" primaryColor="#22A366" />
				</uni-forms-item>
				<uni-forms-item label="密码" name="passwd" required>
					<uni-easyinput type="password" v-model="formData.passwd" placeholder="请输入" primaryColor="#22A366" />
				</uni-forms-item>
				<uni-forms-item label="确认密码" name="passwd1" required>
					<uni-easyinput type="password" v-model="formData.passwd1" placeholder="请输入" primaryColor="#22A366" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="register-page-group  add-btns">
			<button style="color:#ffffff;backgroundColor:#22A366;" @click="handleRegister">保存</button>
		</view>
	</view>
</template>

<script>
import statusBarVue from '@/components/statusBar.vue'

import {
	postAddRegister
} from '@/utils/api.js'

import {
	publics
} from '@/mixins/publics.js';

export default {
	mixins: [publics],
	data() {
		return {
			registerData: {},
			formData: {},
			rules: {
				nick: {
					rules: [{
						required: true,
						errorMessage: '昵称不能为空',
					}]
				},
				phone: {
					rules: [{
						required: true,
						errorMessage: '手机号码不能为空',
					}, {
						validateFunction: function (rule, value, data, callback) {
							const phonePattern = /^1\d{10}$/;
							if (!(phonePattern.test(value))) {
								callback('手机号码格式错误')
							}
							return true
						}
					}]
				},
				passwd: {
					rules: [{
						required: true,
						errorMessage: '密码不能为空',
					}]
				},
				passwd1: {
					rules: [{
						required: true,
						errorMessage: '确认密码不能为空',
					},
					{
						validateFunction: function (rule, value, data, callback) {
							if (value !== data.passwd) {
								callback('密码不一致')
							}
						}
					}
					]
				}
			}
		}
	},
	components: {
		statusBarVue
	},

	onLoad(options) {
		const registerData = JSON.parse(options.registerDataStr);
		this.registerData = registerData;
		this.formData.nick = registerData.nickName;
	},
	methods: {
		// 注册
		handleRegister() {
			this.$refs.form.validate((err, formData) => {
				if (!err) {
					let {
						nick,
						passwd
					} = {
						...this.formData
					}

					const {
						avatar,
						loginId,
						openId
					} = {
						...this.registerData
					}

					const registerData = {
						avatar,
						loginId: loginId ? loginId : formData.phone,
						openId,
						nick,
						passwd
					};

					console.log("registerData -------->>>", registerData)
					postAddRegister(registerData).then(
						req => {
							if (req.code === 200) {
								uni.setStorageSync(
									'_token',
									req.data.token.token
								);

								uni.reLaunch({
									url: '/pages/home/index'
								});
							} else {
								uni.showToast({
									icon: 'error',
									title: req.detail
								});
							}
						}
					)
				}
			})
		}
	}
}
</script>

<style lang="scss">
.register-page {
	margin: auto;
	position: fixed;
	left: 0;
	right: 0;
	z-index: 99;
	background-color: #F2F3F7;
	padding: 16px 3.66vw;
	box-sizing: border-box;
}
</style>